<script setup lang="ts">
import {ref} from "vue"
import {useRoute} from "vue-router";
import axios from "axios";
import {ServerHost} from "@/main.js";
import {downloadImg} from "@/utils";
import dayjs from 'dayjs'
import {ElMessageBox, ElNotification} from "element-plus";
import vueQr from 'vue-qr/src/packages/vue-qr.vue'
import logo from "@/assets/images/logo.svg"
import Clipboard from "clipboard"

const route = useRoute()
const policyId = route.params.id;
const policy = ref({
  id: 0,
  title: '',
  content: '',
  postTime: '',
  coverImg: '',
  pageview: 0
})
const coverImgUrl = ref('')
const link = ref('')
link.value = window.location.href
const isLoading = ref(true)

// 获取政策
axios.get(`${ServerHost}/getPolicy?id=${policyId}`)
    .then((res) => {
      if (res.status === 200) {
        console.log(res.data)
        policy.value = res.data
        // 更新标题
        document.title = `${policy.value.title} - 乡兴助农`;
        //  处理换行符
        policy.value.content = policy.value.content.replace(/\n/g, '<br>')
      }
      downloadImg(policy.value.coverImg, "PolicyCover/")
          .then(res => {
            if (res.status === 200) {
              const type = 'image/png'
              const blob = new Blob([res.data], {type: type})
              const imgFile = new File([blob], policy.value.coverImg, {type: type})
              coverImgUrl.value = URL.createObjectURL(imgFile)
              isLoading.value = false
            }
          })
    })

//浏览量+1
axios.post(`${ServerHost}/policyPageviewAdd1?id=${policyId}`)

let clipboard = new Clipboard("#copyLinkBtn");
const onCopyLink = () => {
  console.log(link.value)
  clipboard.on("success", function (e) {
    ElNotification({
      title: '复制成功，可以分享了',
      type: 'success',
      position: 'bottom-right',
    })
    e.clearSelection();
  })
  clipboard.on("error", function (e) {
    ElNotification({
      title: '复制失败',
      type: 'success',
      position: 'bottom-right',
    })
    e.clearSelection();
  })
}

// 安卓端设备判定
const isAndroidDevice = ref(false)
const schemaUrl = `rrs://shiyue0x0.top:9902/goods?id=${policyId}`
const userAgent = navigator.userAgent;
if (/android/i.test(userAgent)) {
  isAndroidDevice.value = true
  ElMessageBox.confirm(
      '要在“乡兴助农”APP中打开吗？',
      {
        confirmButtonText: '前往APP',
        cancelButtonText: '不需要',
        type: 'warning',
      }
  )
      .then(() => {
        launchApp()
      })
}
const launchApp = () => {
  location.href = schemaUrl
}

</script>

<template>
  <el-card class="m-2" v-loading="isLoading">
    <template #header>
      <p class="name">{{ policy.title }}</p>
      <p class="info">乡兴助农 · {{ dayjs(policy.postTime).format('YYYY/MM/DD HH:mm:ss') }} · 浏览量
        {{ policy.pageview }}</p>
    </template>

    <img class="cover-img mb-2 m-auto" :src="coverImgUrl" alt="image">
    <p v-html="policy.content"/>

    <template #footer>
      <el-button id="copyLinkBtn" @click="onCopyLink" :data-clipboard-text="link" data-clipboard-action="copy">
        复制链接
      </el-button>
      <el-popover
          placement="top-start"
      >
        <template #default>
          <vue-qr
              :text="link"
              :logoSrc="logo"
              colorDark="#33B173"/>
        </template>
        <template #reference>
          <el-button v-if="!isAndroidDevice">前往手机浏览</el-button>
        </template>
      </el-popover>
      <el-button v-if="isAndroidDevice" class="launchApp" @click="launchApp">打开APP</el-button>
    </template>
  </el-card>

</template>

<style scoped lang="scss">
.name {
  font-size: 1.3rem;
  font-family: "思源宋体 Heavy", serif;
  color: var(--el-color-primary);
}

.info {
  font-size: 0.9rem;
  color: var(--el-color-info);
}

.cover-img {
  width: 100%;
  max-width: 800px;
  border-radius: 8px;
}
</style>
